// 在Vuex中 需要处理网路请求 我们就需要导入axios 
// @ 以根目录的方式定义相对路径 想到与src/
import axios from '@/http/axios'

// 配置Vuex结构
export default {
  // vuex中的store分成模块来管理 需要在index.js中引入每一个Vuex模块进行配置 为了解决不同模块命名冲突的问题  将不同模块的namespaced 全部开启 之后 在不同的页面中再使用getters，actions，mutations，state的时候 需要根据不同的模块名来获取
  namespaced: true,

  state: {
    total: 0,
    customer: [],
    customers_d:{},
    customers: [],
  },
  mutations: {
    SET_CUSTOMERS(state, customers) {
      state.customers = customers;
    },
    // 3. 触发突变，更改state的值
    SET_CUSTOMER(state, customer) {
      state.customer = customer
    },
    SET_TOTAl(state, total) {
      state.total = total
    },
    SET_CUSTOMER_D(state, customers_d) {
      state.customers_d = customers_d;
    },
  },
  actions: {
    // 因为涉及到异步操作，所以定义到actions中
    findAllCustomer(context) {
      axios.get("/customer/findAll").then(
        res => {
          context.commit("SET_CUSTOMERS", res.data.data)
        }
      )
    },
    queryCustomer(context, data) {
      // 1. 向后台发送网络请求，获取顾客信息
      axios.post("/customer/query", data).then(
        res => {
          // 2. 在actions中，提交突变（mutation），来改变state中的值
          context.commit("SET_CUSTOMER", res.data.data.list)
          context.commit("SET_TOTAl", res.data.data.total)
        }
      ).catch(
        err =>{
          console.log(err)
        }
      )
    },
    saveCustomer({dispatch}, from) {
      axios.post("/customer/saveOrUpdate", from).then(
        res => {
          dispatch("queryCustomer", { page: 0, pageSize: 5 })
        }
      )
    },
    delCustomerById({dispatch},id){
      axios.get("/customer/deleteById?id="+id).then(
        res => {
          dispatch("queryCustomer", { page: 0, pageSize: 5 })
        }
      )
    },
    findCustomerById({commit},id){
      axios.get("/customer/findCustomerById?id="+id).then(
        res => {
        commit("SET_CUSTOMER_D",res.data.data)
        }
      )

    }
  }
}